 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">余额变更</div>
      </div>
      <div class="content-con">
        <div class="capital-money">
          <div class="capital-money-item">
            账户余额：<span class="list2">0</span>元
            代付余额：<span class="list2">9930</span>元
            冻结金额：<span class="list3">0</span>元
            保证金额：<span class="list3">0</span>元
          </div>
        </div>
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="150" class="change-item">
          <Form-item label="商户ID" prop="id">
            <i-input v-model="formValidate.id" size="large" readonly></i-input>
          </Form-item>
          <Form-item label="账户类型" prop="gender">
            <Radio-group v-model="formValidate.gender" size="large" vertical>
              <Radio label="paid">
                  <span>代付余额</span>
              </Radio>
              <Radio label="freeze">
                  <span>冻结金额</span>
              </Radio>
              <Radio label="ensure">
                  <span>保证金额</span>
              </Radio>
              <Radio label="nopaid">
                  <span>代付余额(不扣手续费)</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="变更金额(元)" prop="money">
            <i-input v-model="formValidate.money" size="large" placeholder="请输入金额"></i-input>
          </Form-item>
          <Form-item label="超级密码" prop="password">
            <i-input v-model="formValidate.password" size="large" placeholder="请输入超级密码"></i-input>
          </Form-item>
          <div class="ban-btn">
            <i-button class="add save" @click="add('formValidate')" size="large">增加金额</i-button>
            <i-button class="sub save" @click="sub('formValidate')" size="large">减少金额</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </div>
        </i-form>
        <Modal
          v-model="modal1"
          width="300" title="信息"
          @on-ok="ok"
          @on-cancel="cancel">
            <div class="content-size">确定为商户增加金额<span>({{this.formValidate.money}}元)</span>么？</div>
            <!-- <div class="btn">
              <i-button @click="ok" class="save" size="large">确定</i-button>
              <i-button @click="cancel" class="" size="large">取消</i-button>
            </div> -->
        </Modal>
        <Modal
          v-model="modal2"
          width="300" title="信息"
          @on-ok="ok"
          @on-cancel="cancel">
            <div class="content-size">确定为商户减少金额<span>({{this.formValidate.money}}元)</span>么？</div>
            <!-- <div class="btn">
              <i-button @click="ok" class="save" size="large">确定</i-button>
              <i-button @click="cancel" class="" size="large">取消</i-button>
            </div> -->
        </Modal>
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'mer-change',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       modal1: false,
       modal2: false,
       formValidate:{
         id: '20000036',
         gender: 'paid',
         money: '',
         password: ''
       },
       ruleValidate:{
         gender:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ],
         money:[
           {
             required: true,
             message: '请输入金额',
             trigger: 'blur'
           }
         ],
         password:[
           {
             required: true,
             message: '请输入超级密码',
             trigger: 'blur'
           }
         ]
        }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'merchants'})
     },
     //表单验证
     add () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
           window.console.log(this.formValidate.money)
           this.modal1 = true;
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     },
     sub () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
           this.modal2 = true;
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     },
     //确定模态框
     ok () {
       this.$Message.info('Clicked ok');
     },
     cancel () {
       this.$Message.info('Clicked cancel');
     }
   }
 };
 </script>
 <style lang="less">
   .change-item{
     width: 50%;
   }
   .change-item .ivu-form-item-label{
     font-size: 14px;
   }
   .content-size{
     font-size: 14px;
   }

   // .card-name{
   //     height: 42px;
   //     border-bottom: 1px solid #f6f6f6;
   //       .name{
   //         margin: 0 15px;
   //         padding: 0;
   //         width: 65px;
   //         text-align: center;
   //         line-height: 42px;
   //         border-bottom: 2px solid #5FB878;
   //       }
   //   }
     // .content-con{
     //   margin: 15px 15px 0px 15px;
     //   .capital-money{
     //     padding-top: 15px;
     //     margin-bottom: 15px;
     //     .capital-money-item{
     //       margin-bottom: 10px;
     //       padding: 15px;
     //       line-height: 22px;
     //       border-left: 5px solid #009688;
     //       border-radius: 0 2px 2px 0;
     //       background-color: #f2f2f2;
     //       .list2{
     //         color: #5FB878;
     //         margin-right: 10px;
     //         font-weight: bold;
     //       }
     //       .list3{
     //         color: red;
     //         margin-right: 10px;
     //       }
     //     }
     //   }
     //   .form-item{
     //     .change{
     //       clear: both;
     //       height: 40px;
     //       margin-bottom: 15px;
     //       .chan-title{
     //          float: left;
     //          display: block;
     //          padding: 9px 15px;
     //          width: 110px;
     //          font-weight: 400;
     //          line-height: 20px;
     //          text-align: right;
     //        }
     //        .chan-input{
     //          float: left;
     //          margin-right: 10px;
     //        }
     //      }
     //    }
     //    .ban-btn{
     //      padding:18px 0px 12px 110px;
     //      .save{
     //        background-color: rgb(0, 150, 136);
     //        color: white;
     //        white-space: nowrap;
     //        text-align: center;
     //        font-size: 14px;
     //        border: none;
     //        border-radius: 2px;
     //        cursor: pointer;
     //        display: inline-block;
     //        height: 38px;
     //        line-height: 38px;
     //        padding: 0 18px;
     //        margin-right: 15px;
     //      }
     //      .add{
     //        background-color: dodgerblue;
     //      }
     //      .sub{
     //        background-color: orangered;
     //      }
     //    }
     //   .page{
     //     position: relative;
     //     width: 100%;
     //     padding: 7px 7px 0;
     //     height: 41px;
     //     font-size: 12px;
     //     // overflow: hidden;
     //     border-bottom: 1px solid #dcdee2;
     //     border-left: 1px solid #dcdee2;
     //     border-right: 1px solid #dcdee2;
     //   }
     // }
 </style>
